<template>
	<el-dialog
		v-if="visible"
		width="60%"
		:visible="visible"
		:close-on-click-modal="true"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
		center
	>
		<div slot="title">
			订单详情
		</div>
		<div
			v-loading="detailLoading"
			element-loading-spinner="el-icon-loading"
		>
			<el-descriptions title="订单信息" :column="4">
				<el-descriptions-item label="游戏账号">
					{{ detail.userName }}
				</el-descriptions-item>
				<el-descriptions-item label="订单号">
					{{ detail.id }}
				</el-descriptions-item>
				<el-descriptions-item label="订单类型">
					{{ detail.parentOrderTypeDesc }}
				</el-descriptions-item>
				<el-descriptions-item label="订单子类">
					{{ detail.orderTypeDesc }}
				</el-descriptions-item>

				<el-descriptions-item label="游戏帐号所属俱乐部ID">
					{{ detail.userClubId || '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="牌桌号">
					{{ detail.tableCode }}
				</el-descriptions-item>
				<el-descriptions-item label="牌桌名称">
					{{ detail.tableName }}
				</el-descriptions-item>
				<el-descriptions-item label="玩法名称">
					{{ typeFilter(detail.gameType, 'gameType') }}
				</el-descriptions-item>

				<el-descriptions-item label="订单金额">
					{{ handleNumber(detail.currency, detail.orderAmount) }}
				</el-descriptions-item>
				<el-descriptions-item label="优惠金额">
					{{
						handleNumber(detail.currency, detail.preferentialAmount)
					}}
				</el-descriptions-item>
				<el-descriptions-item label="实付/实得金额">
					{{ handleNumber(detail.currency, detail.payAmount) }}
				</el-descriptions-item>
				<el-descriptions-item label="订单纯利">
					{{
						handleNumber(
							detail.currency,
							detail.serviceContribution
						)
					}}
				</el-descriptions-item>

				<el-descriptions-item label="下单IP">
					{{ detail.orderIp || '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="下单时间">
					{{ detail.orderTime ? parseTime(detail.orderTime) : '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="结算时间">
					{{ detail.netTime ? parseTime(detail.netTime) : '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="终端">
					{{ typeFilter(detail.obDeviceType, 'gameDeviceType') }}
				</el-descriptions-item>

				<el-descriptions-item label="手牌号">
					{{ detail.handCode || '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="订单状态">
					{{ detail.orderStatus === 1 ? '已结算' : '未结算' }}
				</el-descriptions-item>
				<el-descriptions-item label="来源订单号">
					{{ detail.originOrderId || '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="收支类型">
					{{ detail.payTypeName || '-' }}
				</el-descriptions-item>

				<el-descriptions-item label="细类编号">
					{{ detail.subOrderTypeCode || '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="细类名称">
					{{ detail.subOrderTypeDesc || '-' }}
				</el-descriptions-item>
				<el-descriptions-item
					label="备注"
					:span="2"
					contentClassName="show-remark"
				>
					{{ detail.remark || '-' }}
				</el-descriptions-item>
			</el-descriptions>
		</div>
		<div class="arrowStyel">
			<el-link
				type="primary"
				:underline="false"
				@click="handlePrevOrNext(1)"
				:disabled="detailLoading || currentRecordIndex === 0"
			>
				<i class="el-icon-d-arrow-left"></i>
				{{ $t('game.game_betslip.previous') }}
			</el-link>
			<div>
				<el-button
					type="primary"
					:disabled="detailLoading"
					@click.native="handleClose"
				>
					{{ $t('common.confirm') }}
				</el-button>
			</div>
			<el-link
				type="primary"
				:underline="false"
				@click="handlePrevOrNext(2)"
				:disabled="
					detailLoading || currentRecordIndex >= recordLength - 1
				"
			>
				{{ $t('game.game_betslip.next') }}
				<i class="el-icon-d-arrow-right"></i>
			</el-link>
		</div>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		detailLoading: {
			type: Boolean,
			default: false
		},
		detail: {
			type: Object,
			default: () => {
				return {}
			}
		},
		recordLength: {
			type: Number,
			default: 0
		},
		currentRecordIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			fontStyle: { color: '#df2d43' }
		}
	},
	methods: {
		handleClose() {
			this.$emit('update:visible', false)
		},
		// 获取上一条下一条
		handlePrevOrNext(type) {
			// type 1上一条 2下一条
			this.$emit('getPrevAndNextDetail', type)
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
	background-color: #333333;
	color: #ffffff !important;
	font-weight: 700;
	padding: 10px 20px 10px;
}

::v-deep .el-dialog__headerbtn {
	font-size: 24px;
	top: 10px;
	right: 10px;
}
::v-deep .el-dialog__close {
	color: #ffffff;
}
::v-deep .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
	padding-bottom: 20px;
}
.arrowStyel {
	margin-top: 100px;
	display: flex;
	justify-content: space-around;
}
.show-remark {
	word-break: break-all;
	white-space: normal;
}
</style>
